<template>
  <el-card class="card-detail">
    <h2>卡牌详情</h2>
    <el-form :inline="true" class="search-form">
      <el-form-item label="卡牌编号">
        <el-input v-model="cardCode" placeholder="输入卡牌编号" style="width: 200px;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchDetail">查询</el-button>
      </el-form-item>
    </el-form>
    <div v-if="card">
      <el-descriptions title="卡牌信息" :column="2" border>
        <el-descriptions-item label="编号">{{ card.code }}</el-descriptions-item>
        <el-descriptions-item label="名称">{{ card.name }}</el-descriptions-item>
        <el-descriptions-item label="稀有度">{{ card.rarity }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ card.type }}</el-descriptions-item>
        <el-descriptions-item label="描述" :span="2">{{ card.description }}</el-descriptions-item>
      </el-descriptions>
      <h3 style="margin-top: 24px;">在售商家</h3>
      <el-table :data="sellers" style="width: 100%;">
        <el-table-column prop="owner_id" label="商家ID" width="120">
          <template #default="scope">
            <el-link @click="viewShop(scope.row.owner_id)">{{ scope.row.owner_id }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="售价" width="100" />
        <el-table-column prop="quantity" label="库存" width="100" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" @click="addToCart(scope.row)">加入购物车</el-button>
            <el-button size="small" type="primary" @click="createOrder(scope.row)">下单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-if="sellers.length === 0" description="暂无商家在售" />
    </div>
    <el-alert v-if="msg" :title="msg" type="info" show-icon class="msg-alert" />
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const card = ref(null)
const sellers = ref([])
const cardCode = ref('')
const msg = ref('')

const fetchDetail = async () => {
  try {
    const res = await axios.get('/card/search', { params: { code: cardCode.value } })
    card.value = res.data[0]
    if (card.value) {
      const sellerRes = await axios.get('/shop/' + card.value.id + '/cards')
      sellers.value = sellerRes.data
    } else {
      sellers.value = []
    }
    msg.value = ''
  } catch (e) {
    msg.value = e.response?.data?.detail || '查询失败'
    ElMessage.error(msg.value)
  }
}
const addToCart = async (item) => {
  try {
    await axios.post('/order/add_to_cart', null, { params: { user_id: 1, user_card_id: item.id, quantity: 1 } })
    msg.value = '已加入购物车'
    ElMessage.success(msg.value)
  } catch (e) {
    msg.value = e.response?.data?.detail || '加入购物车失败'
    ElMessage.error(msg.value)
  }
}
const createOrder = async (item) => {
  try {
    await axios.post('/order/create', { user_card_id: item.id, quantity: 1 }, { params: { buyer_id: 1 } })
    msg.value = '下单成功'
    ElMessage.success(msg.value)
  } catch (e) {
    msg.value = e.response?.data?.detail || '下单失败'
    ElMessage.error(msg.value)
  }
}
const viewShop = (sellerId) => {
  ElMessage.info('跳转到商家主页：' + sellerId)
}
</script>

<style scoped>
.card-detail {
  max-width: 700px;
  margin: 40px auto;
  padding: 32px 24px;
  border-radius: 12px;
  background: #f8f9fa;
}
.search-form {
  margin-bottom: 16px;
}
.msg-alert {
  margin-top: 16px;
}
</style> 